<template>
    <div class="border-box">
        <div class="outer-box">
            <div class="group-attribute-name"
                 @click="borderGroupName=!borderGroupName">
                <i class="group-icon" :class="borderGroupName ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"/>
                <span v-text="groupName"/>
            </div>
            <div class="all-border-style"
                 :class="{'h0': !borderGroupName, 'all-border-height28':border.style=='none', 'all-border-height172':border.style!='none'}">
                <div class="group-attribute">
                    <div class="attr-item-label">样式</div>
                    <div class="block">
                        <el-select v-model="border.style"
                                   style="width: 100%;"
                                   size="mini">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <ul class="border-style-box">
                    <li class="attr-item border-attr-width">
                        <div class="attr-item-label">宽度</div>
                        <div class="block">
                            <el-slider
                                v-model="border.width"
                                :show-input-controls="false"
                                input-size="mini"
                                show-input>
                            </el-slider>
                        </div>
                    </li>
                    <li class="attr-item">
                        <div class="attr-item-label">圆角</div>
                        <div class="block">
                            <el-input v-model="border.radius" size="mini" type="number"/>
                        </div>
                    </li>
                    <li class="attr-item">
                        <div class="attr-item-label">颜色</div>
                        <div class="block color-block">
                            <el-input v-model="border.color" size="mini" :readonly="true"/>
                            <el-color-picker
                                class="yx-color-picker"
                                v-model="border.color"
                                show-alpha
                                size="mini"
                                :predefine="predefineColors">
                            </el-color-picker>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'YXBorder',
        props: {
            groupName: {
                type: String,
                default: '边框'
            },
            border: {
                type: Object,
                default: {
                    style: 'none',
                    width: 1,
                    radius: '0',
                    color: 'rgba(0, 0, 0, 1)'
                }
            },
            options: {
                type: Array,
                required: true,
                default: _ => {
                    return [
                        {
                            value: 'none',
                            label: '无'
                        },
                        {
                            value: 'solid',
                            label: '实线'
                        },
                        {
                            value: 'dashed',
                            label: '虚线'
                        },
                        {
                            value: 'dotted',
                            label: '点线'
                        },
                        {
                            value: 'double',
                            label: '双实线'
                        }
                    ];
                }
            }
        },
        data() {
            return {
                borderGroupName: true,
                predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                    '#00ced1',
                    '#1e90ff',
                    '#c71585',
                    'rgba(255, 69, 0, 0.68)',
                    'rgb(255, 120, 0)',
                    'hsv(51, 100, 98)',
                    'hsva(120, 40, 94, 0.5)',
                    'hsl(181, 100%, 37%)',
                    'hsla(209, 100%, 56%, 0.73)',
                    '#c7158577'
                ]
            };
        }
    }
</script>

<style scoped lang="scss">
    .border-box {
        margin-top: 20px;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, .15);

        .outer-box {
            ul, li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .h0 {
                height: 0 !important;
                overflow: hidden;
            }
            .group-attribute-name {
                height: 20px;
                width: fit-content;
                user-select: none;
                color: #999;
                cursor: pointer;

                .group-icon {
                    font-size: 18px;
                }
            }
            .all-border-style {
                height: 38px;
                overflow: hidden;
                transition: height .2s;

                .group-attribute {
                    height: 28px;
                    display: flex;
                    overflow: hidden;
                    margin-top: 10px;

                    .attr-item-label {
                        padding-right: 12px;
                        line-height: 28px;
                    }
                    .block {
                        flex: 1;
                    }
                }
                .border-style-box {
                    .attr-item {
                        height: 38px;
                        display: flex;
                        overflow: hidden;
                        margin-top: 10px;

                        .attr-item-label {
                            padding-right: 12px;
                            line-height: 38px;
                        }
                        .block {
                            width: calc(100% - 43px);
                            line-height: 38px;
                        }
                        .color-block {
                            position: relative;

                            .yx-color-picker {
                                position: absolute;
                                top: 8px;
                                right: 3px;
                            }
                        }
                    }
                }
            }
            .all-border-height172 {
                height: 178px;
            }
            .all-border-height28 {
                height: 38px;
            }
        }
    }
</style>
<style lang="scss">
    .border-box {
        .outer-box {
            .border-style-box {
                .attr-item {
                    .el-slider__input.el-input-number--mini {
                        width: 52px;
                    }
                    .el-slider__runway {
                        width: 166px;
                    }
                    .color-block {
                        .el-color-picker--mini .el-color-picker__trigger {
                            width: 24px;
                            height: 24px;
                            padding: 2px;
                        }
                    }
                }
            }
        }
    }
</style>
